<template>
  <div class="agents">
    <div class="banner">
      <div class="box">
        <p>加入我们</p>
        <p>让世界看到，<span :class="color">你</span>的影响力</p>
      </div>
      <img src="./images/请坐.jpg" alt="" />
      <button class="btn">立即投递</button>
    </div>
    <div class="school container">
      <div class="title">校招项目</div>
      <div class="content">
        <div class="left">
          <span>校园招聘</span>
          <!-- <img src="../../assets/recruit/boshimao.jpg" alt="" width="100px"> -->
          <div class="xy">
            <p>2022校园招聘</p>
            <p>2021年9月1日-2022年8月31日</p>
          </div>
          <div class="xx">
            <p>专项介绍</p>
            <p>技术大咖 ></p>
          </div>
        </div>
        <div class="right">
          <el-col :span="18">
            <p>实习生招聘</p>
            <div class="xy">
              <p>2022实习生招聘</p>
              <p>面向全部在校生开放的不少于两个月的实习项目</p>
            </div>
          </el-col>
          <el-col :span="6">
            <el-button round class="connect">立即沟通</el-button>
          </el-col>
        </div>
      </div>
        <!-- 下面 -->
      <p class="title">关注阿巴阿巴招聘，获取最新动态</p>
      <div>
        <el-row type="flex">
          <el-col class="image" :span="4" style="text-align:center"><img src="../../assets/recruit/bilibili.jpg" width="150px" alt=""></el-col>
          <el-col class="image" :span="4" style="text-align:center"><img src="../../assets/recruit/gongzhonghao.jpg" width="150px" alt=""></el-col>
          <el-col class="image" :span="4" style="text-align:center"><img src="../../assets/recruit/qqyinyue.jpg" width="150px" alt=""></el-col>
          <el-col class="image" :span="4" style="text-align:center"><img src="../../assets/recruit/shipinhao.jpg" width="150px" alt=""></el-col>
          <el-col class="image" :span="4" style="text-align:center"><img src="../../assets/recruit/xiaochengxu.jpg" width="150px" alt=""></el-col>
          <el-col class="image" :span="4" style="text-align:center"><img src="../../assets/recruit/xiaohongshu.jpg" width="150px%" alt=""></el-col>
        </el-row>
      </div>
    </div>
  </div>
</template>

<script>
let timer;
export default {
  name: "MyAgents",
  data() {
    return {
      color: ["a", "b", "c"],
    };
  },
  mounted() {
    timer = setInterval(() => {
      const arr = ["a", "b", "c"];
      this.color = arr[Math.floor(Math.random() * arr.length)];
    }, 1000);
  },
  beforeDestroy() {
    if (timer) {
      clearInterval(timer);
    }
  },
};
</script>

<style lang="less" scoped>
.agents {
  background-color: rgb(241, 241, 241);
}
.a {
  color: rgb(95, 196, 0);
}
.b {
  color: rgb(4, 152, 127);
}
.c {
  color: rgb(0, 81, 218);
}
.banner {
  position: relative;
  height: 650px;
  .box {
    position: absolute;
    top: 50%;
    left: 20%;
    transform: translateY(-70%);
    width: 200px;
    font-family: cursive;
    font-style: italic;
    color: #fff;
    p:first-child {
      transform: translate(-30%, -60%);
    }
    p {
      width: 600px;
    }
    span {
      font-size: 70px;
    }
  }
  p {
    font-size: 50px;
  }
  img {
    width: 100%;
    height: 100%;
  }
}
.btn {
  position: absolute;
  top: 60%;
  left: 30%;
  width: 120px;
  height: 45px;
  border: 1px solid #e4e4e4;
  font-size: 16px;
  border-radius: 30px;
  color: #fff;
  background-color: rgba(0, 0, 0, 0.3);
  box-shadow: 3px 4px 12px #e4e4e4;
  opacity: 0.4;
  z-index: 666;
  cursor: pointer;
  &:hover{
    // background-color: rgb(121,192,0);
    color: rgb(26,250,41);
  }
}
.school {
  padding: 30px 0;
  font-family: cursive;
  font-size: 35px;
  font-weight: bold;

  .title {
    padding-bottom: 30px;
    font-style: italic;
  }
  .content {
    display: flex;
    justify-content: space-between;
    margin-bottom: 30px;
    .left {
      width: 500px;
      height: 240px;
      border-radius: 23px;
      background-color: #fff;
      box-shadow: 3px 4px 12px #e4e4e4;
      padding: 30px 30px;
      font-weight: 400;
      margin-right: 25px;
      transition: all 0.3s;
      &:hover {
        width: 1000px;
        background-color: rgb(25, 99, 221);
      }

      .xy,
      .xx {
        font-size: 15px;
        font-weight: 500;
        line-height: 2;
      }
      .xx {
        margin-top: 20px;
      }
    }
    .right {
      padding: 20px;
      width: 670px;
      height: 260px;
      border-radius: 23px;
      background-color: rgb(121, 192, 0);
      box-shadow: 3px 0px 10px rgb(121, 192, 0);
      transition: all 0.3s;
      &:hover {
        width: 1000px;
  
      }

      p {
        margin: 10px;
      }
      .xy,
      .xx {
        font-size: 15px;
        font-weight: 500;
        line-height: 2;
      }
      .connect {
        // display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
      }
    }
  }
  .image{
    &:hover{
      transition: all 0.6s;
      transform: scale(1.8);
      
    }
  }
}
</style>
